var mySwiper1 = new Swiper(".container1", {
    loop: true,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    pagination: {
        el: ".swiper-pagination",
        clickable: true
    },
    autoplay: {
        pauseOnMouseEnter: true,
        disableOnInteraction: false
    },
    loopAdditionalSlides: 1,
    parallax: true,
    centeredSlides: true,
    centeredSlidesBounds: true,
    effect: "slide",
})





$(function () {



    class Container2 {
        constructor() {
            this.wrapper = $(".container2>.swiper-wrapper");
            this.data = {}
            $.ajax({ url: "../../static/data/index_goods.json" })
                .done((res) => {
                    this.data = res;

                    this.rander();
                    
                    var mySwiper2 = new Swiper(".container2", {
                        autoplay: {
                            pauseOnMouseEnter: true,
                            disableOnInteraction: false
                        },
                        effect: "slide",
                        // observer:true,
                        loop: true,
                        speed: 800,
                        loopAdditionalSlides: 1,
                        parallax: true,
                    })
                    Echo.init({
                        offset: 0,
                        throttle: 500,
                    })
                })
        }
        rander() {
            let length = Math.ceil(this.data.thumb.length / 5);
            for (let i = 0; i < length; i++) {
                let res = `<div class="swiper-slide">`
                for (let j = 0; j < 5; j++) {
                    res += `<div class="swiper-img-fr">
                    <a href="" target="_blank">
                        <img alt="轮播图" data-echo=" ${this.data.thumb[i * 5 + j].thumb_pic}">
                    </a>
                    <h3 class="title">
                        <a href="" target="_blank">${this.data.thumb[i * 5 + j].thumb_title}</a>
                    </h3>
                    <p class="desc">${this.data.thumb[i * 5 + j].thumb_desc}</p>
                        </div>`
                    if (i * 5 + j >= this.data.thumb.length - 1)
                        break;
                }
                res += `</div>`
                this.wrapper.append(res);
            }
        }
    }


    new Container2();


    class Clearfix {
        constructor() {
            this.tapl = $(".clearfix .pull-left");
            this.data = {}
            $.ajax({ url: "../../static/data/index_goods.json" })
                .done((res) => {
                    this.data = res;
                    this.rander();
                    Echo.init({
                        offset: 0,
                        throttle: 500,
                    })

                })
        }

        rander() {
            for (let i = 0; i < this.data.brand.length; i++) {
                var res = `<a class="brand-big" data-block-type="adv" data-width="240" data-height="385" data-block-name="left_adv"
                    target="_blank" href=${this.data.brand[i].brand_ba}>
                    <img data-echo="${this.data.brand[i].brand_big}">
                </a>
                <a class="brand-samll" data-block-type="adv" data-width="240" data-height="140" data-block-name="left_adv_adsense" target="_blank" href=${this.data.brand[i].brand_sa}>
                                        <img data-echo=${this.data.brand[i].brand_small}>
                                </a>`

                this.tapl.eq(i).append(res);
            }
        }
    }

    new Clearfix()

    class Clfgoods {
        constructor(min, num, ele) {
            this.goods_list = $(ele)
            this.data = {}
            $.ajax({ url: "../../static/data/index_goods.json" })
                .done((res) => {
                    this.data = res;
                    this.rander(min, num);
                    Echo.init({
                        offset: 0,
                        throttle: 500,
                    })

                })
        }

        rander(min, num) {
            for (let i = min; i < num; i++) {
                let res = `<div class="ns-border-color-gray">
                <a  target="_blank">
                    <div class="goods-pic">
                        <img data-echo=${this.data.goods[i].good_pic}>
                    </div>
                    <div class="googs-title ellipsis-1">${this.data.goods[i].good_title}</div>
                    <div class="goods-price ns-text-color ellipsis-1">${this.data.goods[i].good_price}</div>
                </a>
            </div>`
                this.goods_list.append(res);
            }
        }
    }

    let CLG = new Clfgoods(0, 3, ".clearfix .cls-1")
    let CLG2 = new Clfgoods(3, 9, ".clearfix .cls-2")
    let CLG3 = new Clfgoods(9, 15, ".clearfix .cls-3")

    class RightSwiper {
        constructor(ele) {
            this.swiper = $(ele)
            this.data = {}
            $.ajax({ url: "../../static/data/index_goods.json" })
                .done((res) => {
                    this.data = res;
                    this.rander();
                    var mySwiper3 = new Swiper(".container3", {
                        loop: true,
                        autoplay: {
                            pauseOnMouseEnter: true,
                            disableOnInteraction: false
                        },
                        direction: 'vertical',
                        slidesPerView: 4,
                        effect: "slide",
                    })
                    Echo.init({
                        offset: 0,
                        throttle: 500,
                    })

                })
        }

        rander() {

            for (let i = 0; i < this.data.floorsw.length; i++) {
                var res = `<div class="swiper-slide">`
                res += `<a href="" style="height: 108px; background-color: rgb(255, 255, 255);" data-swiper-slide-index="15">
                <div class="floor-recommend-pic">
                                                    <img data-echo=${this.data.floorsw[i].floor_pic}>
                                                </div>
                <div class="floor-recommend-cont">
                    <div class="recommend-goods-name ">${this.data.floorsw[i].floor_title}</div>
                    <div class="recommend-goods-price">${this.data.floorsw[i].floor_price}</div>
                </div>
            </a>`
                res += `</div>`
                this.swiper.append(res);
            }
        }
    }

    new RightSwiper(".container3 .swiper-wrapper")

    class Container4 {
        constructor() {
            this.wrapper = $(".container4>.swiper-wrapper");
            this.data = {}
            $.ajax({ url: "../../static/data/index_goods.json" })
                .done((res) => {
                    this.data = res;
                    

                    this.rander();
                    var mySwiper2 = new Swiper(".container4", {
                        effect: "slide",
                        // observer:true,
                        loop: true,
                        speed: 800,
                        loopAdditionalSlides: 1,
                        parallax: true,
                    })
                    Echo.init({
                        offset: 0,
                        throttle: 500,
                    })

                })
        }
        rander() {
            let length = Math.ceil(this.data.increment.length / 5);
            for (let i = 0; i < length; i++) {
                let res = `<div class="swiper-slide">`
                for (let j = 0; j < 5; j++) {
                    res += `<div class="swiper-img-fr">
                    <a href="" target="_blank">
                        <img alt="轮播图" data-echo=${this.data.increment[i * 5 + j].incre_pic}>
                    </a>
                    <h3 class="title">
                        <a href="" target="_blank">${this.data.increment[i * 5 + j].incre_title}</a>
                    </h3>
                    <p class="price">${this.data.increment[i * 5 + j].incre_price}</p>
                        </div>`
                    if (i * 5 + j >= this.data.increment.length - 1)
                        break;
                }
                res += `</div>`
                this.wrapper.append(res);
            }
        }
    }

    new Container4();

    class HotGoods {
        constructor() {
            this.frame = $(".hot-goods");
            this.data = {}
            $.ajax({ url: "../../static/data/index_goods.json" })
                .done((res) => {
                    this.data = res;
                    this.rander();
                    Echo.init({
                        offset: 0,
                        throttle: 500,
                    })

                })
        }

        rander() {
            for (let i = 0; i < this.data.hot.length; i++) {

                let res = `<div class="hot-fr" style="height: 350px;">
                <div  style="text-align:center;">
                    <a href="">
                        <img data-echo=${this.data.hot[i].hot_pic} width="220" height="220" alt=""></a>
                </div>
                <p class="review"><a href="">${this.data.hot[i].hot_preve}</a></p>
                <div class="info">
                    <h3 class="title"><a href="">${this.data.hot[i].hot_title}</a></h3>
                    <span class="sep">|</span>
                    <p class="price">${this.data.hot[i].hot_price}</p>
                </div>
            </div>`

                this.frame.append(res);
            }
        }
    }

    new HotGoods();

    class City {
        constructor() {
            this.wrapper = $(".container5>.swiper-wrapper");
            this.data = {}
            $.ajax({ url: "../../static/data/index_goods.json" })
                .done((res) => {
                    this.data = res;

                    this.rander();
                    var mySwiper5 = new Swiper(".container5", {
                        effect: "slide",
                        // observer:true,
                        // autoplay: {
                        //     pauseOnMouseEnter: true,
                        //     disableOnInteraction: false
                        // },
                        loop: true,
                        speed: 1000,
                        loopAdditionalSlides: 1,
                        parallax: true,
                    })
                    Echo.init({
                        offset: 0,
                        throttle: 500,
                    })

                })
        }
        rander() {
            let length = Math.ceil(this.data.city.length / 4);
            for (let i = 0; i < length; i++) {
                let res = `<div class="swiper-slide">`
                for (let j = 0; j < 4; j++) {
                    res += `<div class="swiper-img-fr">
                    <a href=${this.data.city[i * 4 + j].city_a} target="_blank">
                        <img alt="轮播图" data-echo=${this.data.city[i * 4 + j].city_pic}>
                    </a>
                    <p class="title">
                        <a href=${this.data.city[i * 4 + j].city_a} target="_blank">${this.data.city[i * 4 + j].city_title}</a>
                    <p>
                    </div>`

                    if (i * 5 + j >= this.data.city.length - 1)
                        break;
                }
                res += `</div>`
                this.wrapper.append(res);
            }
        }
    }
    new City();

    class Hotel {
        constructor() {
            this.wrapper = $(".container6>.swiper-wrapper");
            this.data = {}
            $.ajax({ url: "../../static/data/index_goods.json" })
                .done((res) => {
                    this.data = res;

                    this.rander();
                    var mySwiper6 = new Swiper(".container6", {
                        effect: "slide",
                        // observer:true,
                        // autoplay: {
                        //     pauseOnMouseEnter: true,
                        //     disableOnInteraction: false
                        // },
                        loop: true,
                        speed: 1000,
                        loopAdditionalSlides: 1,
                        parallax: true,
                    })
                    Echo.init({
                        offset: 0,
                        throttle: 500,
                    })

                })
        }
        rander() {
            let length = Math.ceil(this.data.hotel.length / 4);
            for (let i = 0; i < length; i++) {
                let res = `<div class="swiper-slide">`
                for (let j = 0; j < 4; j++) {
                    res += `<div class="swiper-img-fr">
                    <a href=${this.data.hotel[i * 4 + j].hotel_a} target="_blank">
                        <img alt="轮播图" data-echo=${this.data.hotel[i * 4 + j].hotel_pic}>
                    </a>
                    <p class="title">
                        <a href=${this.data.hotel[i * 4 + j].hotel_a} target="_blank">${this.data.hotel[i * 4 + j].hotel_title}</a>
                    <p>
                    </div>`

                    if (i * 5 + j >= this.data.hotel.length - 1)
                        break;
                }
                res += `</div>`
                this.wrapper.append(res);
            }
        }
    }
    new Hotel();
})

